<!-- 审核不通过的艺人列表 -->
<script lang="ts">
export default {
  name: "yyartistManagementnoPass",
};
</script>
<template>
  <div class="page-box h100 display-flex czbj">
    <p class="title-label mb10">
      审核不通过的艺人列表
    </p>
    <div>
      <dxtable :headBtn="headBtn" :dataJson="dataJson" :portUrl="portUrl" :qx="qx" ref="databale" :czFun="czFun">
      </dxtable>
    </div>
  </div>
  <n-modal v-model:show="showModal" preset="card" class="dsfsdrewreweawee">
    <template #header>
      <div>审核</div>
    </template>
    <div>
      <div class="fz16 b">
        用户基本信息：
      </div>
      <div class="kkmxewrtsewr mt10">
        <div class=" display-flex">
          真实姓名：{{ rowsd.Name }}
        </div>
        <div class=" display-flex">
          身份证号码：{{ rowsd.IdCard }}
        </div>
        <div class=" display-flex">
          所在城市：{{ rowsd.city }}
        </div>
      </div>
      <div class="fz16 b mt10">
        申请详情：
      </div>
      <n-row class="" :gutter="[10, 10]">
        <n-col :span="12">
          <div class=" display-flex">
            昵称：{{ rowsd.nickname }}
          </div>
        </n-col>
        <n-col :span="6">
          年龄：{{ rowsd.age }}
        </n-col>
        <n-col :span="6">
          身高：{{ rowsd.height }}
        </n-col>
        <n-col :span="6">
          体重：{{ rowsd.weight }}
        </n-col>
        <n-col :span="6">
          爱好：{{ rowsd.hobby }}
        </n-col>
        <n-col :span="12">
          接单时间：{{ rowsd.OrderStartTime }}--{{ rowsd.OrderEndTime }}
        </n-col>
        <n-col :span="6">
          服务区域：{{ rowsd.coverage }}
        </n-col>
        <n-col :span="18">
          个性宣言：{{ rowsd.PersonalityStatement }}
        </n-col>
      </n-row>

      <p class="mt10 b">
        服务项目
      </p>
      <n-row class="" :gutter="[10, 15]">
        <n-col :span="6" v-for="item in rowsd.servicesAvailable">
          <n-alert :show-icon="false">
            {{ item.label }}<br>
            {{ item.jiage }} / {{ item.danwei }}
          </n-alert>
        </n-col>
      </n-row>

      <p class="mt10 b">
        照片
      </p>
      <n-row class="" :gutter="[10, 15]">
        <n-col :span="6" v-for="item in rowsd.photograph">
          <n-image :src="item" class="kkzxcerert" width="100" height="100"></n-image>
        </n-col>
      </n-row>


      <div class="fsdfstrtt mt20 tr">

        <n-radio-group v-model:value="jjnmxd" name="radiogroup">
          <n-space>
            <n-radio value="1">
              审核中
            </n-radio>
            <n-radio value="2">
              通过
            </n-radio>
            <n-radio value="3">
              不通过
            </n-radio>
          </n-space>
        </n-radio-group>
      </div>
      <div v-if="jjnmxd == 3" class="mt10">
        <n-input rows="6" v-model:value="yujmmnx" type="textarea" placeholder="请输入不通过原因" size="medium"
          clearable></n-input>
      </div>
    </div>
    <template #action>
      <div class="tr">
        <n-button type="info" @click="shenhese"> 审核 </n-button>
        <n-button @click="showModal = false" class="ml20"> 关闭 </n-button>
      </div>
    </template>
  </n-modal>
</template>
<script lang='ts' setup>
import dxtable from "../../../components/util/dxtable.vue";
import sort from "../../../components/util/sort.vue";
import { dxget, dxpost, qurl, hf, dialog } from "../../../util/index";
import { h, ref, reactive, onBeforeUpdate } from "vue";
import { NButton, NImage } from "naive-ui"
const props = defineProps({
  pup: { type: String },
});
const jjnmxd = ref('3')
const showModal = ref(false)
const qcosertt = ref()
let portUrl = "yuyue/listTechnicians?audit=3&field=b.city,b.Name,b.IdCard,b.nickname,listTechnicians.*";
let headBtn = [];
const zdList = ref()
const databale = ref();
const videourl = ref()
const typeli = ref([])
const rowsd = ref({})

const yujmmnx = ref()
const initeer = () => {
  databale.value.initDataExpose();
};
const emit = defineEmits(["callBack"]);
// 弹窗公用该列表
let dataJson = reactive([

  {
    title: "真实姓名",
    search: true, // 是否在搜索栏展示
    key: "Name",
    width: 80,
  },
  {
    title: "身份证号码",
    key: "IdCard",
  },
  {
    title: "昵称",
    search: true, // 是否在搜索栏展示
    key: "nickname",
  }, {
    title: "身高",
    key: "height",
    width: "80"
  }, {
    title: "体重",
    key: "weight",
    width: "80"
  },
  {
    title: "爱好",
    key: "hobby",
  },
  {
    title: "接单时间",
    render(row) {
      return row.OrderStartTime + '--' + row.OrderEndTime
    }
  }, {
    title: "服务区域",
    key: "coverage",
  },{
    title: "审核失败原因",
    key: "auditReason",
  },

]);

const qx = {
  DeletePermissionID: "yyartistManagementnoPassdel22", //删除
  EditPermissionIdentifier: "yyartistManagementnoPassbj22", // 编辑
  NewPermissionIdentifier: "yyartistManagementnoPassxz22", // 新建
  ViewPermissionID: "yyartistManagementnoPassck", // 查看
};

const czFun = {
  fun: (row, loading) => {
    return [
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
            showModal.value = true
            rowsd.value = row
            yujmmnx.value = row.auditReason
            rowsd.value.servicesAvailable = JSON.parse(rowsd.value.servicesAvailable)
            rowsd.value.photograph = rowsd.value.photograph.split(",")

          },
        },
        "重新审核"
      )
    ];
  },
};

const shenhese = async () => {
  if (jjnmxd.value == '1') {
    yujmmnx.value = ""
  }
  if (jjnmxd.value == '2') {
    yujmmnx.value = ""
    const jnxr = await dialog('确认审核通过嘛？')
    if (jnxr != 1) {
      return
    }
  }
  if (jjnmxd.value == '3') {
    if (!yujmmnx.value) {
      window.$message.error("请输入不通过的原因")
      return
    }
  }
  await dxpost("yuyue/api/shenhe",{
    openid:rowsd.value.openid,
    audit:jjnmxd.value,
    auditReason:yujmmnx.value
  })
  showModal.value = false
  initeer()
}

</script>
<style scoped>
.fsdfereertr {
  width: 100%;
  height: 360px;
}

.kkmxewrtsewr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px
}
</style>
   
   
   